<%@ page language="java" contentType="text/html; charset=UTF8"
	pageEncoding="UTF8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8">
<title>Na`Vi AppStore</title>
<script src="references/js/jquery-2.1.0.min.js"></script>
<script>
	function getAppDetail(appid){
		$.ajax({
	        type: "POST",
	        url: "/Struts_1.3_WebApp_FrameWork/getAppDetailAction.jms",
	        data: {
	            appid: appid
	        }
	        })
	    .done(function (msg) {
	                var obj = $.parseJSON(msg);
	                $('#app-detail-title').html(obj.title);
	                $('#app-detail-infor').html(obj.infor);
	                $('#imagecontent').html(obj.imagecontent);
	                $('#app-description').html(obj.description);
	        });
	}
	function getComment(appid){
		$.ajax({
	        type: "POST",
	        url: "/Struts_1.3_WebApp_FrameWork/getCommentAction.jms",
	        data: {
	            appid: appid
	        }
	        })
	    .done(function (msg) {
	                $('#comment').html(msg);
	        });
	}
	$(document).ready(function(){
		var appid = ${requestScope.appid};
		getAppDetail(appid);
		getComment(appid);
	});
</script>
</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">
		<tiles:putAttribute name="body">
		<div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">List App</h3>
      </div>
      <div class="panel-body">
      
      
			<article class="search-result row">
			<div class="col-xs-12 col-sm-12 col-md-3" id="app-detail-title">
				<a href="#" title="Lorem ipsum" class="thumbnail"><img src="images/portfolio1.jpg" alt="Lorem ipsum"></a>
	
			</div>
			<div class="list">
			<div class="col-xs-12 col-sm-12 col-md-2" style="min-height: 345px;" id="app-detail-infor">
				<ul class="meta-search">
					<li><i class="glyphicon glyphicon-calendar"></i> <span>05.21.2014</span></li>
					<li><i class="glyphicon glyphicon-time"></i> <span>Phiên bản: 1.18.166
					</span></li>
					<li><i class="glyphicon glyphicon-asterisk"></i> <span>Yêu cầu : IOS 4.3 or higher</span></li>
					<li><i class="glyphicon glyphicon-eye-open"></i> <span>Lượt xem: 153977 </span></li>
					<li><i class="glyphicon glyphicon-briefcase"></i> <span>Kích thước: 58.18 Mb</span></li>
					<li><i class="glyphicon glyphicon-download-alt"></i> <div class="btn btn-default" style=" padding: 0px 5px 0px 5px; font-size: 10px;  border-radius: 15px;">
					Free-Tải về</div></li>
				</ul>
			</div>
			</div>
			<div class="col-xs-12 col-sm-12 col-md-7 excerpet">
				<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Description</a></li>
  <li><a href="#profile" data-toggle="tab">Comment</a></li>
  <li><a href="#messages" data-toggle="tab">Help-FeedBack</a></li>
 
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">
  <div class="carousel slide media-carousel" id="media">
        <div id ="imagecontent" class="carousel-inner">
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>
	  <div id="app-description" class="contain-item">
	  </div></div>



  <div class="tab-pane" id="profile">
  
  <div class="row">
        <div class="panel panel-default widget">
            <div class="panel-heading" style="text-align:left">
                <span class="glyphicon glyphicon-comment"></span>
                <h3 class="panel-title">
                    Recent Comments</h3>
                
            </div>
            <div class="panel-body">
                <ul class="list-group" id="comment">
                    Can't see me
                </ul>
               </div>
               <logic:notEmpty name="username">
               <input type="text" id="comment-content" class="form-control" style="min-height: 100px;margin-top:10px" placeholder="Comment">
               <button id="comment-add" class="btn btn-info" type="button">Send</button>
               </logic:notEmpty>
               
               <script>
               	$("#comment-add").click(function(){
               		
               		var comment = $("#comment-content").val();
               		$.ajax({
               	        type: "POST",
               	        url: "/Struts_1.3_WebApp_FrameWork/addCommentAction.jms",
               	        data: {
               	        	comment: comment,
               	        	appid: "${requestScope.appid}"
               	        }
               	        })
               	    .done(function (msg) {
               	    	if(msg=="login"){
               	    		alert("You must login before add comment");
               	    	}else{
               	    	getComment("${requestScope.appid}");
               	    	$("#comment-content").val("");
               	    	}
               	        });
               	});
               	$("#comment-content").keypress(function(e) {
					if (e.which == 13) {
						$("#comment-add").click();
					}
				});
               </script>
        </div>
    </div>
  </div>
  
  
  <div class="tab-pane" id="messages">
  <center>
  <div class="col-xs-12 hidden-xs hidden-sm hidden-md hidden-lg" style="height: 160px"></div>
  <a class="btn btn-info" href="mailto:lionvnam@gmail.com" target="_top">Feedback</a>
  </center>
  </div>
  
</div>
			</div>
			<span class="clearfix borda"></span>
		</article>
		</div>
    </div>
		<div id="downloadLink"></div>
		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>